<style lang="less">
.swiper-container {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  width: 100%;
  height: 9.3rem;
  margin: 0 auto !important;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform,-webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 6.1rem;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
}
.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    border:2px solid #a98438;
    background:transparent;
    opacity: .2;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #a98438;
}
</style>
<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>  
  <div class="level-head">
    <div class="level-ctx">
      <p class="name" v-if="userinfo.UserLevel>0">
        <span class="iconfont icon ft22" v-bind:class="classObject"></span> 会员
      </p>
      <p class="name" v-if="userinfo.UserLevel==0">普通会员
      </p>
      <div class="time">开通时间 {{userinfo.levelUpTime | getDate}}</div>
      <span class="explain"><i class="iconfont icon-update"></i>一年内累计充值1000元即成为VIP1会员</span>
    </div>
  </div>
  <tab :line-width='2'
       class="level-tab" bar-active-color="#a98438" active-color="#644e1f">
    <tab-item :selected="selectedNum=='0'"
      @on-item-click="goLink(0)">普通会员</tab-item>
    <!-- <tab-item :selected="selectedNum=='2'"
      @on-item-click="goLink(1)">储值会员</tab-item> -->
    <tab-item :selected="selectedNum=='1'"
      @on-item-click="goLink(1)"><span class="iconfont icon-v1 icon"></span>会员</tab-item>
    <!-- <tab-item :selected="selectedNum=='3'"
      @on-item-click="goLink(3)"><span class="iconfont icon-v2 icon"></span>会员</tab-item>
    <tab-item :selected="selectedNum=='4'"
      @on-item-click="goLink(4)"><span class="iconfont icon-v3 icon"></span>会员</tab-item>
    <tab-item :selected="selectedNum=='5'"
      @on-item-click="goLink(4)"><span class="iconfont icon-v4 icon"></span>会员</tab-item> -->
  </tab>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide level-swiper-slide">
        <p class="name">普通会员<span class="mark free">免费</span></p>
        <div class="tag">账号开通即为普通会员</div>
        <div class="vip-server-list">
          <div class="displayflex server has">
            <div class="flex1 server-name">日间服务</div>
            <i class="iconfont icon-check"></i>
          </div>
          <div class="displayflex server has">
            <div class="flex1 server-name">夜间服务</div>
            <i class="iconfont icon-check"></i>
          </div>
          <div class="displayflex server">
            <div class="flex1 server-name">每单赠送一万元货运险</div>
            <i class="iconfont icon-check"></i>
          </div>
        </div>
      </div>
      <div class="swiper-slide level-swiper-slide">
        <p class="name">VIP1会员<span class="mark">付费</span></p>
        <div class="tag">一年内累计充值1000元即成为VIP1会员</div>
        <div class="vip-server-list">
          <div class="displayflex server has">
            <div class="flex1 server-name">日间服务</div>
            <i class="iconfont icon-check"></i>
          </div>
          <div class="displayflex server has">
            <div class="flex1 server-name">夜间服务</div>
            <i class="iconfont icon-check"></i>
          </div>
          <div class="displayflex server has">
            <div class="flex1 server-name">每单赠送一万元货运险</div>
            <i class="iconfont icon-check"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>
</template>

<script>
import Swiper from "../../../static/swiper/swiper-4.2.2.min.js"
export default {
  name: 'level',
  data(){
    return{
      selectedNum:0,
      // levelTime: '',
      swiperM:'',
      showLoad:false
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    classObject: function () {
      var msg = JSON.parse(localStorage.UserInfo);
      return {
        'icon-v1': msg.UserLevel==1
      }
    }
  },
  created(){
    
  },
  mounted() {
    this.$nextTick(function() {
      this.swiper();
      this.getData();
    });
  },
  methods:{
    getData(){
      // var filter = this.$options.filters['getDate'];
      // this.levelTime = filter(this.userinfo.levelUpTime);
      this.selectedNum = this.userinfo.UserLevel;
      this.swiperM.slideTo(this.selectedNum);
      // this.memberTitle = '<span class="iconfont icon-v'+ this.selectedNum +' icon ft22"></span> 会员';
    },
    goLink(num){
      this.swiperM.slideTo(num);//切换到第一个slide，速度为1秒
    },
    swiper(){
      var _this = this;
      this.swiperM = new Swiper('.swiper-container', {
          slidesPerView: 'auto',
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          centeredSlides: true,
          spaceBetween: 15,
          grabCursor: true,
          on: {
            slideChangeTransitionEnd: function(event){
              _this.selectedNum = this.activeIndex;//切换结束时，告诉我现在是第几个slide
            },
          }
      });
    }
  }
}
</script>